<template>
	<view @touchstart="handleTouchstart" @touchend="handleTouchend">
		学习触屏
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime: 0,
				startX: 0,
				startY: 0,
			}
		},
		methods: {
			handleTouchstart(event){
				
				this.startTime = Date.now();
				this.startX = event.changedTouches[0].clientX
				this.startY = event.changedTouches[0].clientY
			},
			handleTouchend(event){
				
				const endTime = Date.now();
				const enX = event.changedTouches[0].clientX;
				const enY = event.changedTouches[0].clientY;
				// 判断时间是否合法
				if(endTime-this.startTime>2000){
					return
				}
				// 滑动的方向
				let direction = "";
				//判断滑动距离是否合法 Math.abs(endX-this.startX)>10 绝对值大于10 
				if(Math.abs(enX-this.startX)>10){
					 // 判断滑动方向
					 direction = enX - this.startX > 0? "right": "left"
				}else {
					return
				}
				console.log(direction)
			}
		}
	}
</script>

<style>
view {
	width: 100%;
	height: 100vh;
	background-color: #10AEFF;
}
</style>
